<template>
    <div style="display: flex;margin-top: 10px;justify-content: space-between;">
        <div style="flex: 3;">
            <el-card class="card-group" style="max-width: 95%;margin-bottom: 50px;">
                <template #header>
                    <div class="card-header">
                        <span>{{ data.name }}/{{ data.clueId }}</span>
                    </div>
                </template>
                <div class="card1">
                    <div>
                        <span>线索创建时间</span>
                        <p>{{ formatDate(data.createTime) }}</p>
                    </div>
                    <div>
                        <span>客户手机号码</span>
                        <p>{{ data.phone }}</p>
                    </div>
                    <div>
                        <span>渠道来源</span>
                        <p>{{ data.channelName }}</p>
                    </div>
                    <div>
                        <span>线索分配者</span>
                        <p>{{ data.allocator }}</p>
                    </div>
                    <div>
                        <span>线索归属时间</span>
                        <p>{{ formatDate(data.belongTime) }}</p>
                    </div>
                    <div>
                        <span>线索归属人</span>
                        <p>{{ data.owner }}</p>
                    </div>
                    <div>
                        <span>所属促销活动信息</span>
                        <p>{{ data.activityName }}/{{ data.activityInfo }}</p>

                    </div>
                    <el-row class="row-bg" justify="end">
                        <el-button type="danger" :disabled="flag" @click="noxs">无效线索</el-button>
                        <el-button type="primary" :disabled="flag" @click="tosj">转为商机</el-button>
                    </el-row>
                </div>
            </el-card>
            <el-card style="max-width: 95%">
                <template #header>
                    <div class="card-header">
                        <span>线索跟进</span>
                    </div>
                </template>
                <div class="card2" style="position: relative;">
                    <!-- 表单部分 -->
                    <el-form ref="ruleFormRef" :model="ruleForm" label-position="top" label-width="auto"
                        class="demo-ruleForm" status-icon :disabled="flag">
                        <el-row>
                            <el-col :span="7" style="margin-right: 43px;">
                                <el-form-item label="客户姓名" prop="name">
                                    <el-input v-model="ruleForm.name" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" style="margin-right: 150px;">
                                <el-form-item label="性别" prop="gender">
                                    <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                                        <el-option v-for="item in sex" :key="item.dictCode" :label="item.dictLabel"
                                            :value="Number(item.dictValue)" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="年龄" prop="age">
                                    <el-input-number v-model="ruleForm.age" :min="1" :max="100" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="客户微信号" prop="weixin" style="max-width: 301px">
                                    <el-input v-model="ruleForm.weixin" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户QQ号码" prop="qq" style="max-width: 301px">
                                    <el-input v-model="ruleForm.qq" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户手机号码" prop="phone" style="max-width: 301px">
                                    <el-input v-model="ruleForm.phone" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="客户意向等级" prop="level">
                            <el-radio-group v-model="ruleForm.level">
                                <el-radio v-for="item in level" :key="item.dictCode" :value="Number(item.dictValue)">{{
                                    item.dictLabel
                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="客户意向类型" prop="subject">
                            <el-radio-group v-model="ruleForm.subject">
                                <el-radio v-for="item in lx" :key="item.dictCode" :value="Number(item.dictValue)">{{
                                    item.dictLabel
                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="跟进记录" prop="channelName">
                            <el-input v-model="ruleForm.channelName" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                        <el-form-item label="下次跟进时间">
                            <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="ruleForm.nextTime"
                                type="datetime" placeholder="下次跟进时间" />
                        </el-form-item>
                    </el-form>
                    <div style="position: absolute;bottom: 0;right: 0;">
                        <el-button type="primary" @click="submitForm" :disabled="flag">
                            提交
                        </el-button>
                        <el-button @click="back" :disabled="false">返回</el-button>
                    </div>
                </div>
                <!-- <template #footer>
                    <button>提交</button>
                    <button @click="back">返回</button>
                </template> -->
            </el-card>
        </div>
        <div style="flex: 1;">
            <el-card style="max-width: 100%">
                <template #header>
                    <div class="card-header">
                        <span>线索跟进记录</span>
                    </div>
                </template>
                <div v-for="o in genxsjl" :key="o" class="text item">
                    <p>{{ o.createBy }}:{{ o.info }}</p>
                    <p>{{ formatDate(o.createTime) }}</p>
                </div>
            </el-card>
        </div>

        <!-- 模态框 -->
        <el-dialog v-model="dialogFormVisible" title="无效线索" width="500">
            <el-form :model="form">
                <el-form-item label="原因">
                    <el-select v-model="form.region" placeholder="请选择原因">
                        <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="item in noxsselect"
                            :key="item.dictCode" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.context" type="textarea" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="tick">确定</el-button>
                    <el-button type="primary" @click="no">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>


    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { looklineList, getjl, getgj, getsex, getlevel, getlx, getfollow, gettobusiness, getinvalidate, getinvalid } from '../../../utils/api';
import { formatDate } from '../../../utils/index';
import { reactive, ref, watch } from 'vue'

// 表单部分
import type { ComponentSize, FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { number } from 'echarts';

interface RuleForm {
    name: string
    gender: number | ''
    age: number | ''
    date1: string
    date2: string
    weixin: string
    qq: string
    phone: string
    resource: string
    desc: string
    record: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm = ref<RuleForm>({
    name: '',
    gender: '',
    age: '',
    date1: '',
    date2: '',
    weixin: '',
    qq: '',
    phone: '',
    resource: '',
    desc: '',
    record: ''
})


const submitForm = () => {
    console.log(ruleForm.value)
    getfollow(
        ruleForm.value
    ).then((r) => {
        console.log(r)
        if (r.code == 200) {
            ElMessage({
                message: r.msg,
                type: 'success',
            })
            router.push("/clue")
        } else {
            ElMessage({
                message: r.msg,
                type: 'error',
            })
        }
    }).catch((r) => {
        console.log(r)
    })
}

const resetForm = () => {
    console.log(ruleForm.value)
}
// 弹出模态框
const noxsselect = ref()
const noxs = () => {
    getinvalidate().then((r) => {
        if (r.code == 200) {
            dialogFormVisible.value = true
            noxsselect.value = r.data
        }
    })
}
const dialogFormVisible = ref(false)

const form = reactive({
    region: '',
    context: '',
})
// 模态框提交
// const record = ref()
const tick = () => {
    // dialogFormVisible.value = false
    ruleForm.value.record = `${form.region}:${form.context}`
    getinvalid(
        ruleForm.value
    ).then((r) => {
        console.log(r)
        if (r.code == 200) {
            ElMessage({
                message: r.msg,
                type: 'success',
            })
            router.push("/clue")
        } else {
            ElMessage({
                message: r.msg,
                type: 'error',
            })
        }
    }).catch((r) => {
        console.log(r)
    })

}
// 模态框取消
const no = () => {
    dialogFormVisible.value = false
}
// 转为商机
const tosj = () => {
    gettobusiness(id).then((r) => {
        if (r.code == 200) {
            ElMessage({
                message: r.msg,
                type: 'success',
            })
            router.push("/clue")
        } else {
            ElMessage({
                message: r.msg,
                type: 'error',
            })
        }
    }).catch((r) => {
        console.log(r)
    })
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

// 路由跳转

const route = useRoute()
const router = useRouter()
// console.log(route.params.clueId);
const id = route.params.clueId
const view = route.params.view
const follow = route.params.follow

const data = ref({})
// 获取线索信息
const getLineinfo = () => {
    looklineList(id).then((res) => {
        data.value = res.data
    })
    console.log(data);
}
const back = () => {
    router.push("/clue")
}

// 获取线索跟进记录
const genxsjl = ref<any>([])
const getjilu = () => {
    getjl(id).then((r) => {
        console.log(r, '获取线索跟进记录')
        genxsjl.value = r.data
    })
}
// 获取线索跟进
const genjin = ref<any>('')
const getgenjin = async () => {
    await getgj(id).then((r) => {
        console.log(r, '获取线索跟进')
        genjin.value = r.data
        ruleForm.value = r.data
    })
}
// console.log('1---------1', ruleForm)
// 获取性别
const sex = ref<any>('')
const Getsex = async () => {
    await getsex().then((r) => {
        console.log(r, '获取性别')
        sex.value = r.data
    })
}
// 获取无效原因

const invalidate = ref<any>('')
const Getclueinvalidate = async () => {
    await getinvalidate().then((r) => {
        invalidate.value = r.data
    })
}

// getlevel
// 获取意向等级
const level = ref<any>('')
const Getlevel = async () => {
    await getlevel().then((r) => {
        console.log(r, '获取意向等级')
        level.value = r.data
    })
}
// 获取意向类型

const lx = ref<any>('')
const Getlx = async () => {
    await getlx().then((r) => {
        console.log(r, '获取意向类型')
        lx.value = r.data
    })
}
console.log(view, '查看权限')


const flag = ref(true)
const getflag = () => {
    if (view == 'view') {
        flag.value = true
    } else {
        flag.value = false
    }
}

getflag()
getLineinfo()
getgenjin()
getjilu()
Getsex()
Getlevel()
Getlx()
Getclueinvalidate()
</script>

<style lang="scss" scoped>
.card-group p {
    color: #ccc;
}

.card1 {
    width: 100%;
    height: 225px;
    // background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card2 {
    width: 100%;
    // height: 611px;

}

.card1>div {
    width: 315px;
    display: flex;
    height: 41px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.demo-form-inline .el-input {
    --el-input-width: 95%;
}

.demo-form-inline .el-select {
    --el-select-width: 95%;
}

.row-bg {
    display: block !important;
}
</style>